import React,{useState,useCallback,useEffect, useMemo} from "react";
import { useNavigate,useLocation } from "react-router-dom";
import { Row,Col, Layout,Menu,Carousel,Button, Radio } from 'antd';
import {SearchOutlined,CaretRightOutlined,UpOutlined} from '@ant-design/icons'
import blogsCss from "../modlue.css/blogs.module.css"
import logo from '../imgs/logo.jpg'
import { Outlet} from "react-router-dom";





function Blogs(){
    const location = useLocation()
    const navigate = useNavigate()
    const { Header, Footer, Sider, Content } = Layout;
    //基础地址
    const baseUrl = '/blogs'
    const currentPage = location.pathname.replace(baseUrl,'') || '/article'
    // 热门标签
    // const hot = [
    //     {
    //         id:1,
    //         title:
    //     },
    //     {
    //         id:2,
    //         title:
    //     },
    //     {
    //         id:3,
    //         title:
    //     },
    //     {
    //         id:4,
    //         title:
    //     },
    //     {
    //         id:5,
    //         title:
    //     },
    //     {
    //         id:6,
    //         title:
    //     },
    //     {
    //         id:7,
    //         title:
    //     },
    //     {
    //         id:8,
    //         title:
    //     },
    //     {
    //         id:9,
    //         title:
    //     }
    // ]
    

    // 最热点击文章
    const essay = [
        {
            id:1,
            img_url:'2021112216340530.png',
            title:'抖音团购常遇问题',
            date: '2022-08-10'
        },
        {
            id:2,
            img_url:'2021112415582014.png',
            title:'批发商贸常见问题及解答',
            date: '2022-08-07'
        },
        {
            id:3,
            img_url:'2021112216340530.png',
            title:'批次管理（批发商贸新版）',
            date: '2022-08-08'
        }
    ]


    function getItem(icon,label, key) {
        return {
          key,
          icon,
          label,
        };
      }

    const hot = ['促销批量管理','满额立减','供货商','供货商资料','会员权益卡','企业','企业微信','供应链','供货商','会员等级进程','会员成长值','会员完善信息奖励','会员余额组合支付','价签','优惠券']

    const [items,setItems] = useState([])
    const current = ['电子发票','预定订餐功能','银豹抖音小程序','支付宝小程序配置流程','散客概览']
    useEffect(()=>{
        setItems(current.map((item,idx)=>
            getItem(<CaretRightOutlined className={blogsCss.sidecolor}/>,item, 'sub'+idx)
        ))    
    },[])
    
    //顶部导航
    const navItems = [
        {
            label: '博客首页',
            key: 'blogs_home',
        },
        {
            label: '最新功能',
            key: 'function',
        },
        {
            label: '操作指南',
            key: 'guide',
        },
        {
            label: '创新应用',
            key: 'creative',
        },
        {
            label: '功能模块',
            key: 'fm',
        },
        {
            label: '硬件设置',
            key: ' setup',
        }
    ]
    //子导航
    const listItems = [
        {
            label: '最新文章',
            key: '/article',
        },
        {
            label: '最新功能',
            key: '/features',
        },
        {
            label: '新手入门',
            key: '/Newbie',
        },
        {
            label: '操作手册',
            key: '/procedures',
        }
    ]
    // 返回顶部
    const toUp = useCallback(()=>{
        const gundong = ()=>{
            //设置缓冲速度,设置一个目标值为0,
           const target = 0
           let top = window.scrollY
           let speed = (target - top)/10
           //滚动条每次向上移动的距离
           let moveTop = top + speed
           //当到达顶部的时候就退出函数，否则会持续向上返回
           if(moveTop <= target ){
               moveTop = target
               scrollTo(0,moveTop)
               return
           }
           scrollTo(0,moveTop)  
           requestAnimationFrame(gundong) 
       }
       requestAnimationFrame(gundong) 
    },[])

    const ChangeMenu = useCallback(({key})=>{
        navigate(baseUrl+key)
    })
    const onClick = (e) => {
        navigate(baseUrl+e.key) 
    };
    const contentStyle = {
        height: '360px',
        color: '#fff',
        lineHeight: '360px',
        textAlign: 'center',
        background: '#364d79',
      };
    return(
        <Layout>
            <Header className={blogsCss.header}>
                <Row>
                    <Col span={4}>
                        <a href="#/home"><img src={logo} /></a>
                    </Col>
                    <Col span={16}>
                    <Menu onClick={onClick}  mode="horizontal" items={navItems} />
                    </Col>
                    <Col span={4}>
                        <SearchOutlined/>
                    </Col>
                </Row>
            </Header>
            <Row>
            <Layout className={blogsCss.blogscontent}>   
                {/* 左边内容 */}
                <Col span={14}>
                <Content>
                    {/* 轮播图 */}
                <Carousel autoplay effect="fade" style={{width:800,marginTop:15}}>
                    <div>
                    <h3 style={contentStyle}><img src="/img/2019081414112119.png"/></h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}><img src="/img/2020081915010878.png"/></h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}><img src="/img/2021030811262475.png"/></h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}><img src="/img/2021031616520395.png"/></h3>
                    </div>
                </Carousel>
                    <Menu 
                    className={blogsCss.listitem} onClick={ChangeMenu}  mode="horizontal" 
                    items={listItems} 
                    defaultSelectedKeys={[currentPage]}/>
                    <Outlet/>
                </Content>
                </Col>
                {/* 右边内容 */}
                <Col span={8} style={{paddingRignt:20,marginLeft:20}}>
                <Sider width={400} className={blogsCss.bg} style={{marginTop:15}}>
                    <h3 className={blogsCss.h3title}>最新功能</h3>
                    <Menu
                        style={{
                        width: 456,
                        }}
                        mode="vertical"
                        items={items}
                        className={blogsCss.bg}
                    />
                    <button className={blogsCss.morebutton} ><a>查看更多</a></button>
                    <h3 className={blogsCss.h4title}>售后咨询</h3>
                    <img style={{width:200}} src="/img/2018090313371630.png" />
                    <h3 className={blogsCss.h4title}>热门标签</h3>
                    {
                        hot.map((item,idx)=>
                            <button key={idx} className={blogsCss.hottag} value="default">{item}</button> 
                            )
                    }
                                    
                    <h3 className={blogsCss.h4title}>最热点击文章</h3>
                    {
                        essay.map(item=>
                            <div key={item.id}>
                                <img style={{width:350,marginTop:15}} src={`/img/`+item.img_url}/>
                                <h5 style={{fontSize:16,marginTop:15}}>{item.title}</h5>
                                <p style={{color:'#999'}}>{item.date}</p>
                            </div>
                        )
                    }
                    
                </Sider>
                </Col>
            </Layout>
            </Row>
            <Footer className={blogsCss.footerbg}>
                <Row>
                    <Col style={{paddingLeft:20}} span={20}>
                        <p>请到[后台-外观-菜单]中设置菜单。</p>
                        <p style={{color:'#999'}}>Copyright © 2017 银豹博客 · Powered By WordPress</p>
                    </Col>
                    <Col span={4}>
                        <Button style={{width:50,height:50}} ghost icon={<UpOutlined />} onClick={toUp}/>
                    </Col>
                </Row>
            </Footer>
        </Layout>
    )
}

export default Blogs